Page Speed: How to evaluate and improve page speed

2023-07-30 08:45 924

Googlehasindicatedthatsitespeed(andasaresult,pagespeed)isoneofthesignalsusedbyitsalgorithmtorankpages.AndresearchhasshownthatGooglemightbespecificallymeasuringtimetofirstbyteaswhenitconsiderspagespeed.Inaddition,aslowpagespeedmeansthatsearchenginescancrawlfewerpagesusingtheirallocatedcrawlbudget,andthiscouldnegativelyaffectyourindexation.

Pagespeedisalsoimportanttouserexperience.Pageswithalongerloadtimetendtohavehigherbounceratesandloweraveragetimeonpage.Longerloadtimeshavealsobeenshowntonegativelyaffectconversions.

Herearesomeofthemanywaystoreduceyourpagespeedloadtime:

Enablecompression

UseGzip,asoftwareapplicationforfilecompression,toreducethesizeofyourCSS,HTML,andJavaScriptfilesthatarelargerthan150bytes.

Donotusegziponimagefiles.Instead,compresstheseinaprogramlikePhotoshopwhereyoucanretaincontroloverthequalityoftheimage.See"Optimizeimages"below.

MinifyCSS,JavaScript,andHTML

Byoptimizingyourcode(includingremovingspaces,commas,andotherunnecessarycharacters),youcandramaticallyincreaseyourpagespeed.Alsoremovecodecomments,formatting,andunusedcode.GooglerecommendsusingCSSNanoandUglifyJS.

Reduceredirects

Eachtimeapageredirectstoanotherpage,yourvisitorfacesadditionaltimewaitingfortheHTTPrequest-responsecycletocomplete.Forexample,ifyourmobileredirectpatternlookslikethis:

example.com->www.example.com->m.example.com->m.example.com/home

...eachofthosetwoadditionalredirectsmakesyourpageloadslower.

Removerender-blockingJavaScript

BrowsershavetobuildaDOMtreebyparsingHTMLbeforetheycanrenderapage.Ifyourbrowserencountersascriptduringthisprocess,ithastostopandexecuteitbeforeitcancontinue.

GooglesuggestsavoidingandminimizingtheuseofblockingJavaScript.

Leveragebrowsercaching

Browserscachealotofinformation(stylesheets,images,JavaScriptfiles,andmore)sothatwhenavisitorcomesbacktoyoursite,thebrowserdoesn'thavetoreloadtheentirepage.UseatoollikeYSlowtoseeifyoualreadyhaveanexpirationdatesetforyourcache.Thensetyour"expires"headerforhowlongyouwantthatinformationtobecached.Inmanycases,unlessyoursitedesignchangesfrequently,ayearisareasonabletimeperiod.Googlehasmoreinformationaboutleveragingcachinghere.

Improveserverresponsetime

Yourserverresponsetimeisaffectedbytheamountoftrafficyoureceive,theresourceseachpageuses,thesoftwareyourserveruses,andthehostingsolutionyouuse.Toimproveyourserverresponsetime,lookforperformancebottleneckslikeslowdatabasequeries,slowrouting,oralackofadequatememoryandfixthem.Theoptimalserverresponsetimeisunder200ms.Learnmoreaboutoptimizingyourtimetofirstbyte.

Useacontentdistributionnetwork

Contentdistributionnetworks(CDNs),alsocalledcontentdeliverynetworks,arenetworksofserversthatareusedtodistributetheloadofdeliveringcontent.Essentially,copiesofyoursitearestoredatmultiple,geographicallydiversedatacenterssothatusershavefasterandmorereliableaccesstoyoursite.

Optimizeimages

Besurethatyourimagesarenolargerthantheyneedtobe,thattheyareintherightfileformat(PNGsaregenerallybetterforgraphicswithfewerthan16colorswhileJPEGsaregenerallybetterforphotographs)andthattheyarecompressedfortheweb.

UseCSSspritestocreateatemplateforimagesthatyouusefrequentlyonyoursitelikebuttonsandicons.CSSspritescombineyourimagesintoonelargeimagethatloadsallatonce(whichmeansfewerHTTPrequests)andthendisplayonlythesectionsthatyouwanttoshow.Thismeansthatyouaresavingloadtimebynotmakinguserswaitformultipleimagestoload.